<template>
	<view class="container">
		<view class="header" :style="{backgroundImage: 'url(' + backgroundImage + ')'}">
			<view class="photo" @click="getInfo">
				<image :src="headImg"></image>
			</view>
			<view class="info">
				<view>{{user.leaveUserNickName}}</view>
				<view>{{user.facultyName}}</view>
				<view>{{user.clbumName}}</view>
			</view>
		</view>
		<view class="main">
			<view class="partContainer" @click="updatePassword()">
				<view class="itemContainer">
					<view class="leftIcon">
						<span class="cuIcon-people span1"></span>
					</view>
					<view class="content">
						<view class="title">修改密码</view>
					</view>
					<view class="rightIcon">
						<span class="cuIcon-right span2"></span>
					</view>
				</view>
			</view>
			
			<view class="partContainer" @click="updateUserInfo()">
				<view class="itemContainer">
					<view class="leftIcon">
						<span class="cuIcon-settings span1"></span>
					</view>
					<view class="content">
						<view class="title">编辑资料</view>
					</view>
					<view class="rightIcon">
						<span class="cuIcon-right span2"></span>
					</view>
				</view>
			</view>
			
			<view class="partContainer" @click="setting()">
				<view class="itemContainer">
					<view class="leftIcon">
						<span class="cuIcon-activity span1"></span>
					</view>
					<view class="content">
						<view class="title">系统版本</view>
					</view>
					<view class="rightIcon">
						<span class="span3">{{systemVersion}}</span>
					</view>
				</view>
			</view>
			
			<view class="partContainer" @click="loginOut()">
				<view class="itemContainer">
					<view class="leftIcon">
						<span class="cuIcon-pullleft span1"></span>
					</view>
					<view class="content">
						<view class="title">退出登陆</view>
					</view>
					<view class="rightIcon">
						<span class="cuIcon-right span2"></span>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view>
			<l-modal ref="customModal" @onClickCancel="cancel" @onClickConfirm="confirm">
				<template>
					<p style="text-align: center;">您确认退出吗</span>？</p>
				</template>
			</l-modal>
		</view>
	</view>
</template>

<script>
	import lModal from '../../components/l-modal/l-modal.vue'
	import { headImg , systemVersion , backgroundImage} from '../../data/data.js'
	export default {
		components: {
			lModal,
		},
		data() {
			return {
				headImg:headImg,
				backgroundImage:backgroundImage,
				systemVersion:systemVersion,
				user:{}
			}
		},
		onLoad() {
			this.$reoladUser()
			this.setHeadImg()
			this.user = uni.getStorageSync('leaveUser')
		},
		methods:{
			setHeadImg(){
				let sessionHeadImg = uni.getStorageSync('headImg');
				if(sessionHeadImg != ''){
					this.headImg = sessionHeadImg
				}else{
					this.headImg = headImg
				}
			},
			open() {
				this.$refs['customModal'].showModal()
			},
			cancel() {
				uni.showToast({
					title:"我就知道你不舍得俺",
					icon:"none"
				})
			},
			confirm() {
				uni.clearStorage();
				uni.redirectTo({
					url:'/pages/index/login'
				})
			},
			updatePassword(){
				uni.navigateTo({
					url:'/pages/component/updatePassword'
				})
			},
			updateUserInfo(){
				uni.navigateTo({
					url:'/pages/index/editUserInfo'
				})
			},
			setting(){
				uni.showToast({
					title:"已是最新版本",
					icon:"none",
					duration:1234
				})
			},
			loginOut(){
				this.open()
			}
		}
	}	
</script>

<style>
	.container{
		width: 100%;
		height: 100%;
		background-color: rgba(248, 248, 249, 1.0);
	}
	.header{
		width: 100%;
		height: 460rpx;
		/* background-image: url(../../static/door.jpg); */
		background-position:center 80%;
		padding-top: 30rpx;
	}
	.photo{
		width: 25%;
		height: 25vw;
		background-color: #007AFF;
		margin: auto;
		border-radius: 50%;
	}
	.photo image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	.info{
		margin-top: 30rpx;
		width: 100%;
		text-align: center;
		color: #ffffff;
		font-size: large;
	}
	.info view:first-child{
		font-size: 150%;
		margin-bottom: 30rpx;
		color: #ffffff;
	}
	.main{
		margin-top: 10upx;
		width: 100%;
		padding: 20upx 30upx 20upx 30upx;
	}
	.partContainer{
		width: 100%;
		height: 80upx;
		border-bottom: 1upx solid rgba(220,220,220,1);		
		padding-top: 10upx;
	}
	.itemContainer{
		width: 100%;
		height: 60upx;
		display: flex;
	}
	.leftIcon{
		width: 60upx;
		height: 60upx;
		line-height: 60upx;
	}
	.span1{
		font-size: 46upx;
	}
	.content{
		height: 60upx;
		line-height: 60upx;
	}
	.title{
		font-size: 36upx;
		font-weight: 500;
	}
	.rightIcon{
		position: absolute;
		right: 28upx;
		height: 60upx;
		line-height: 60upx;
		color: gray;
	}
	.span2{
		font-size: 36upx;
		color: #acacac;
	}
	.partContainer:last-child{
		border: 0;
	}
	.span3{
		float: right;
		color: #acacac;
		margin-right: 15upx;
		font-size: 35upx;
	}
	.btnContainer{
		width: 100%;
		height: 80upx;
		position: absolute;
		bottom: 40upx;
	}
	.loginOutBtn{
		width: 70%;
		height: 70upx;
		line-height: 70upx;
		font-size: 40upx;
		background-color: red;
		color: white;
		border-radius: 0.4em;
	}
</style>
